<script setup>
import { ref,reactive } from "vue";
import {useRouter} from 'vue-router'
import axios from "axios";
const router=useRouter();
const name=ref("");
const pass=ref("");
const login=()=>{
    router.push({name:"login"})
}
const xiu=async()=>{
    try {
        const { data } = await axios.get("http://localhost:8080/xiu", {
            params: {
                name: name.value,
                pass: pass.value
            }
        });
        if(data!=0){
            alert("修改成功");
        }else{
            alert("修改失败");
        }
    } catch (error) {
        console.error("请求失败:", error);
    }
}


</script>

<template>
<div class="a">
    <form>
<table cellpading="6" cellspacing="0" border="1">
    <tr>
        <td colspan="2">用户名：<input type="text" name="name" v-model="name"></td>
    </tr>
    <tr>
        <td colspan="2">密码：<input type="text" name="pass" v-model="pass"></td>
    </tr>
    <tr>
        <td align="center"><button type="button" @click="xiu">修改</button>
        <button type="button" @click="login">返回登录</button></td>
    </tr>
 
</table>
</form>
 
</div>
</template>

<style scoped>
.a {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  max-width: 500px;
  margin: 5vh auto;
  padding: 2.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1rem;
}

td {
  padding: 1rem;
  border: none;
}

input {
  width: calc(100% - 1rem);
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s;
  margin: 0 0.5rem 0 0;
}

input:focus {
  outline: none;
  border-color: #ffc107;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 0.5rem;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

button:first-of-type {
  background: linear-gradient(135deg, #ffc107, #e0a800);
  color: #212529;
}

button:last-of-type {
  background: linear-gradient(135deg, #007bff, #0062cc);
  color: white;
}
</style>
